<template>
  <div>
    <div class="banner">
      <img :src="themeImg" mode="aspectFill" />
      <!-- <div class="search">
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/icon/kdb.png"
          mode="widthFix"
          class="search-btn"
        />
        <input
          v-model="navName"
          class="search-ipt"
          type="text"
          placeholder="功能搜索"
          placeholder-class="placeholder-part"
        />
      </div>-->
    </div>
    <div class="order-panel">
      <div class="shop-info">
        <div class="left">
          <img :src="account.logo" mode="aspectFill" class="logo" />
          <div>
            <span>{{ account.shopName }}</span>
            <p style="font-size:12px;color:#9b9b9b;">
              今日订单数
              <span style="color:#ffbe0d;">{{ dayNum }}</span>
            </p>
          </div>
        </div>
        <div class="linkBox" @click="linkShop">
          <span>进店看看</span>
          <img :src="linkImg" mode="aspectFill" class="linkImg" />
        </div>
      </div>
      <!-- <div class="order-link">
        <label
          v-for="item in orderType"
          :key="item.key"
          class="link"
          @click="linkClick(item.tab)"
        >
          <p class="order-num">{{ orderCountForm[item.key] }}</p>
          <span class="order-state">{{ item.name }}</span>
        </label>
      </div>-->
    </div>
    <div class="nav-wrap">
      <p
        v-for="(item, idx) in showList"
        :key="idx"
        class="nav-link"
        @click="navLickClick(item)"
      >
        <img :src="item.icon" mode="widthFix" class="nav-icon" />
        <span class="nav-name">{{ item.word }}</span>
      </p>
    </div>
    <!-- <div class="isOneClickDis" v-if="isOneClickDis">
      <div class="zz" @click="zzOneClickDis"></div>
      <div class="box">
        <div class="imgBox">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_dialog_fenxiao.png"
            mode="widthFix"
          />
          <div class="checkbox">
            <i-checkbox-group @change="onAllChange">
              <i-checkbox
                :checked="isAllShops"
                value="立即成功分销商即同意"
                color="#5b94f6"
              ></i-checkbox>
            </i-checkbox-group>
          </div>
          <div class="cont">
            <a href="/pages/shop-management/deal1/main" class="myDeal">《分销商入驻协议》</a>
            <a
              href="/pages/shop-management/deal-dis-shop/main"
              class="myDeal"
            >《分销市场管理规范》</a>
          </div>
          <button class="btn" @click="enter">立即入驻</button>
        </div>
      </div>
    </div>-->
    <AlertBox :dateInfo="dateInfo" @change="AlertBoxChange" :isAlert="isAlert"></AlertBox>
    <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar>
  </div>
</template>

<script>
import vueTabBar from '../../../components/vueTabBar'
import AlertBox from '@/components/AlertBox'
import {
  FIND_SHOP_ORDER_PAGE,
  FIND_SHOP_BASE_INFO,
  FIND_SHOP_URL,
  FIND_SHOP_DECORATION
} from '@/api'

export default {
  components: { vueTabBar, AlertBox },
  props: {},
  data () {
    return {
      dateInfo: {},
      isAlert: false,
      navName: '',
      shopIdentity: '',
      orderType: [
        { name: '待发货', key: '1', tab: 'tab1' },
        { name: '待付款', key: '0', tab: 'tab2' },
        { name: '已收货', key: '3,7', tab: 'tab3' },
        { name: '退款/售后', key: '4,5,8', tab: 'tab4' }
      ],
      orderCountForm: {
        '1': 0,
        '0': 0,
        '3,7': 0,
        '4,5,8': 0
      },
      dayNum: 0,
      linkImg:
        'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_shop.png',
      selectNavIndex: 1,
      needButton: true,
      supState: ''
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    showList () {
      let arr = [
        {
          word: '商品管理',
          pinyin: 'shangpinguanli',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_spgl.png',
          url: '/pages/shop-management/goods-management/index/main',
          isLink: this.shopIdentity === 'PERSONAL'
        },
        {
          word: '会员管理',
          pinyin: 'huiyuanguanli',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_hygl.png',
          url: '/pages/shop-management/vip-admin/main'
        },
        {
          word: '评价管理',
          pinyin: 'pingjiaguangli',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_pjgl.png',
          url: '/pages/shop-management/evaluate/main',
          isLink: this.shopIdentity === 'PERSONAL'
        },
        {
          word: '核销管理',
          pinyin: 'woyaohexiao',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_hxgl.png',
          url: '/pages/shop-management/my-verification/main'
        },
        {
          word: '店铺装修',
          pinyin: 'dianpuzhuangxiu',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_dpzx.png',
          url: '/pages/shop-management/shop-fitment/main',
          isLink: this.shopIdentity === 'PERSONAL'
        },
        {
          word: '营销工具',
          pinyin: 'yingxiaogongju',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_yxgj.png',
          url: '/pages/shop-management/marketing-tool/main'
        },
        {
          word: '供货管理',
          pinyin: 'gonghuoguanli',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/nav-gonghuo.png',
          url: '/pages/shop-management/supply/list/main'
        },
        {
          word: '店铺数据',
          pinyin: 'dianpushuju',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/nav-dpsj.png',
          url: `/pages/data-analyze/show-data-option/main`
        },
        {
          word: '服务方式',
          pinyin: 'fuwufangshi',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_fwfs.png',
          url: `/pages/shop-management/shop-fitment-modeDeploy/main`,
          isLink: this.shopIdentity === 'PERSONAL'
        },
        // {
        //   word: '分销市场',
        //   pinyin: 'fenxiaoshichang',
        //   icon:
        //     'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_fxsc.png',
        //   url: '/pages/shop-management/dis/index/main'
        // },
        {
          word: '动态',
          pinyin: 'dongtai',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/nav-dongtai.png',
          url: '/pages/mine/inform/dynamic/main'
        },

        // {
        //   word: '上架商品',
        //   pinyin: 'shangjiashangpin',
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/nav6.png',
        //   url: '/pages/shop-management/goods-management/info/main',
        //   isLink: this.shopIdentity === 'PERSONAL',
        //   test: this.shopIdentity
        // }
        // {
        //   word: '线下收款码',
        //   pinyin: 'xianxiashoukuanma',
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/nav9.png',
        //   url: '/pages/mine/shop-config/qr-code/main',
        //   isLink: false
        // }
        {
          word: '新评价管理',
          pinyin: 'pingjiaguangli',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_pjgl.png',
          url: '/pages/shop-management/comment/list/main',
          isLink: this.shopIdentity === 'PERSONAL'
        }
      ]
      let reg = new RegExp(this.navName.replace(/[.'?^$+]/g, ''))
      return arr.filter(_ => {
        let word = reg.test(_.word) // 中文
        let pinyin = reg.test(_.pinyin) // 拼音
        return word || pinyin
      })
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_store_management.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_store_management2.png'
      }
    }
  },
  onShareAppMessage () {
    return {
      title: '开店宝',
      path: '/pages/login/index/main',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopIdentityParams()
    this.initOrderCount()
    this.getDayOrderNum()
    this._findDecoration()
    this.isAlert = false
    wx.hideTabBar()
  },
  methods: {
    linkShop () {
      this.findShopURL()
    },

    findShopURL () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        isOffline: false
      }
      FIND_SHOP_URL(params)
        .then(r => {
          if (r.data.code === '0') {
            let token = r.data.data.split('?token=')[1]
            let url = encodeURIComponent(
              `https://akk.028wkf.cn/small-store?token=${token}`
            )
            vm.$router.push(
              `/pages/open-shop/link2/main?openURL=${url}
              }`
            )
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    AlertBoxChange (val) {
      this.isAlert = val
    },

    initOrderCount () {
      const vm = this

      let list = vm.orderType.map(_ => _.key)
      list.forEach(_ => {
        vm.shopOrderCount(_)
      })
    },
    shopOrderCount (state) {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        state
      }

      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.orderCountForm[state] = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    linkClick (tab) {
      const vm = this
      if (vm.shopIdentity === 'PERSONAL') {
        vm.$toast('创业宝不能使用此功能，请先升级宝主身份。')
      } else {
        vm.$router.push('/pages/shop-management/shop-order/main?val=' + tab)
      }
    },
    navLickClick (item) {
      const vm = this
      if (item.url) {
        if (!item.isLink) {
          if (item.pinyin === 'fenxiaoshichang') {
            if (!vm.$cookie.get('isOneClickDis')) {
              vm.isOneClickDis = true
            }
          } else if (item.pinyin === 'gonghuoguanli') {
            if (vm.supState !== 1) {
              vm.dateInfo = {
                src:
                  'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/supplier_succ.png',
                title: '提示',
                label: '您还未成为供应商，请前往市场认证'
              }
              vm.isAlert = true
            } else {
              vm.$router.push(`${item.url}`)
            }
          } else if (item.pinyin === 'fuwufangshi') {
            vm.$router.push(`${item.url}?shippingMode=${vm.shippingMode}`)
          } else {
            vm.$router.push(`${item.url}`)
          }
        } else {
          vm.$toast('创业宝店不能使用此功能，请先升级商家身份。')
        }
      } else {
        vm.$toast('暂未开放')
      }
    },
    getShopIdentityParams () {
      const vm = this
      FIND_SHOP_BASE_INFO(vm.account.shopId).then(r => {
        if (r.data.code === '0') {
          let { shopIdentity, state } = r.data.data
          vm.shopIdentity = shopIdentity
          vm.supState = state
        } else {
          vm.$toast(r.data.message)
        }
      })
    },
    getDayOrderNum () {
      const vm = this
      let day = new Date()
      day.setTime(day.getTime())
      let date =
        day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate()
      let params = {
        shopId: vm.account.shopId,
        state: '3,7',
        orderDateEnd: `${date} 23:59:59`,
        orderDateStart: `${date} 00:00:00`
      }
      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.dayNum = r.data.data.total
          } else {
            vm.$toast(r.data.message)
            vm.dayNum = 0
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _findDecoration () {
      const vm = this
      // let obj = {} // 存放默认位子的东西
      FIND_SHOP_DECORATION(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data) {
              vm.shippingMode = r.data.data.shippingMode
            } else {
              vm.$cookie.set('isOne', true)
            }
          }
        })
        .catch(e => {
          console.info(e)
        })
    } // 获取店铺装修信息
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  height: 100px;
  > img {
    width: 100%;
    height: 100%;
  }
  > .search {
    display: flex;
    align-items: center;
    > .search-btn {
      width: 50px;
      margin-right: 5px;
    }
    > .search-ipt {
      width: calc(100% - 100px);
      background-color: $white;
      font-size: 15px;
      padding: 2px 15px;
      border-radius: 20px;
      color: $black;
    }
  }
}
.order-panel {
  background: $white;
  border-radius: 8px;
  font-size: 15px;
  padding: 15px;
  position: absolute;
  width: calc(100% - 40px);
  left: 20px;
  top: 40px;
  box-shadow: 0px 3px 8px $light-black;
  > .shop-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-bottom: 10px;
    > .left {
      display: flex;
      align-items: center;
      .logo {
        width: 54px;
        height: 54px;
        margin-right: 5px;
        border-radius: 4px;
      }
    }
    > .linkBox {
      position: relative;
      > span {
        width: 70px;
        font-size: 13px;
        color: #fff;
        position: absolute;
        top: 4px;
        right: 10px;
        z-index: 1;
      }
      > .linkImg {
        width: 90px;
        height: 28px;
      }
    }
  }
  > .order-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .link {
      width: 25%;
      text-align: center;
      > .order-num {
        font-size: 18px;
      }
      > .order-state {
        font-size: 12px;
        color: #9b9b9b;
      }
    }
  }
}
.nav-wrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: calc(80px - 46px);
  > .nav-link {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    width: 25%;
    > .nav-icon {
      width: 80%;
    }
    > .nav-name {
      font-size: 12px;
      margin-top: 10px;
    }
  }
}
</style>
